<script src="../../dist/mini-vue.js"></script>

<div id="demo">
    <h1>Latest MiniVue.js Commits</h1>
    <span v-for="branch in branches">
        <input type="radio" :id="branch" :value="branch" name="branch" v-model="currentBranch.value" />
        <label :for="branch">{{ branch }}</label>
    </span>
    <p>leaon4/mini-vue3@{{ currentBranch.value }}</p>
    <ul>
        <li v-for="({ html_url, sha, author, commit }) in commits.value">
            <a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
            - <span class="message">{{ truncate(commit.message) }}</span><br />
            by
            <span class="author"><a :href="author.html_url" target="_blank">{{ commit.author.name }}</a></span>
            at <span class="date">{{ formatDate(commit.author.date) }}</span>
        </li>
    </ul>
</div>

<script>
    const { createApp, ref, effect } = MiniVue;
    const API_URL = `https://api.github.com/repos/leaon4/mini-vue3/commits?per_page=3&sha=`;

    const truncate = (v) => {
        const newline = v.indexOf('\n');
        return newline > 0 ? v.slice(0, newline) : v;
    };

    const formatDate = (v) => v.replace(/T|Z/g, ' ');

    var app = createApp({
        setup() {
            const currentBranch = ref('master');
            const commits = ref(null);

            effect(() => {
                fetch(`${API_URL}${currentBranch.value}`)
                    .then((res) => res.json())
                    .then((data) => {
                        commits.value = data;
                    });
            });

            return {
                branches: ['master', 'template-explorer'],
                currentBranch,
                commits,
                truncate,
                formatDate,
            };
        },
    });
    app.mount('#demo');
</script>

<style>
    #demo {
        font-family: 'Helvetica', Arial, sans-serif;
    }

    a {
        text-decoration: none;
        color: #f66;
    }

    li {
        line-height: 1.5em;
        margin-bottom: 20px;
    }

    .author,
    .date {
        font-weight: bold;
    }
</style>